<!-- 购物车页 -->
<template>
  <div class="cart">
    <!-- 商品列表 -->
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item"
        v-for="item in cartList"
        :key="item.id"
        @click="singleCheckFn"
      >
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :desc="item.goods_specifition_name_value"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交订单 -->
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkAll" @click="checkallFn">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { getCartList } from "@/utils/https";
export default {
  data() {
    return {
      result: [], // 选中的项集合
      cartList: [], // 购物车全部商品集合
      checkAll: false, // 全选状态 默认不选中
    };
  },
  computed: {
    totalPrice() {
      let sum = 0;
      //console.log("计算");
      this.result.forEach((item) => {
        sum += item.retail_price * item.number * 100;
      });
      return sum;
    },
  },
  created() {
    getCartList().then((res) => {
      //console.log(res);
      this.cartList = res.data.data.cartList;
    });
  },
  methods: {
    onSubmit() {
      // 提交订单
    },
    onClickEditAddress() {
      //修改地址
    },
    checkallFn() {
      //全选事件
      //console.log(this.checkAll); //获取全选状态
      if (this.checkAll) {
        // 全选
        this.result = this.cartList;
      } else {
        //全不选
        this.result = [];
      }
    },
    singleCheckFn() {
      //单选事件
      console.log(this.result);
      if (this.result.length == this.cartList.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },
  },
};
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.cart {
  width: 100%;
  height: 100%;
  .van-checkbox {
    display: flex;
    // /deep/ 样式穿透 修改vant 中设置好的样式
    /deep/.van-checkbox__label {
      flex: 1;
    }
  }
  // padding-bottom: 100px;
  // box-sizing: border-box;
  .van-submit-bar {
    bottom: 50px;
  }
}
</style>